<template>
  <div class="FocusResources">
    <div class="TopNav">
      <div
        :class="['TopNav_box', { seleText: ite.typeId == seleVlue }]"
        v-for="ite of ListVal"
        :key="ite.typeId"
        @click="ChangeSele(ite.typeId)"
      >
        {{ ite.typeName }}
      </div>
    </div>
    <div class="ListImge">
      <div
        class="ListImge_item"
        v-for="item of ListImageItems.slice(0, 6)"
        :key="item.title"
      >
        <img
          class="ListImge_item_imge"
           :src="
            item.images[0]
              ? item.images[0]
              : require('../../assets/img/tushu.png')
          "
        />
        <div class="ListImge_item_Textbox">{{ item.title }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import service from "@/service/service";

export default {
  data() {
    return {
      // 当前选中值
      seleVlue: null,
      ListVal: [],

      ListImageItems: [],
    };
  },
  methods: {
    ChangeSele(id) {
      this.seleVlue = id;
      this.getFocusResourceList(id);
    },
    // 获取所有类型列表
    async getAllTypes() {
      try {
        const response = await service({
          url: "/frontend/index/typeList",
          method: "post",
          data: {
            pageSize: 100,
            pageNo: 1,
          },
        });
        if (response.code === 200) {
          this.ListVal = response.data.list;
          this.seleVlue = this.ListVal[0].typeId;
          this.getFocusResourceList(this.seleVlue);
        } else {
          console.error("获取所有类型列表失败:", response.msg);
        }
      } catch (error) {
        console.error("获取所有类型列表失败:", error);
      }
    },
    // 获取焦点资源列表
    async getFocusResourceList(typeId) {
      try {
        const response = await service({
          url: `/frontend/index/focusResourceList/${typeId}`,
          method: "post",
        });
        if (response.code === 200) {
          this.ListImageItems = response.data.data;
        } else {
          this.$message.error(response.msg);
        }
      } catch (error) {
        console.error("获取焦点资源列表失败:", error);
      }
    },
  },
  mounted() {
    this.getAllTypes();
  },
};
</script>

<style lang="scss" scoped>
@import "../../assets/style/indexpage.scss";

.FocusResources {
  margin: 0 auto;
  border-top: 1px solid #e5e5e5;
  padding-top: 20px;
  // overflow: hidden;
}
.TopNav {
  display: flex;
  &_box {
    // min-width: 110px;
    padding: 7px 15px;
    height: 42px;
    background: #f2f2f2;
    border-radius: 6px;
    border: 1px solid #e6e6e6;
    margin-left: 20px;
    font-size: 20px;
    color: #9999;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    &:hover {
      background: #e3edff;
    }

    &:first-of-type {
      margin-left: 0px;
    }
  }

  .seleText {
    border: 1px solid #327dff;
    background: #e3edff;
    font-weight: 500;
    font-size: 20px;
    color: #327dff;
  }
}

.ListImge {
  display: flex;
  margin-top: 30px;
  &_item {
    width: 210px;
    height: 290px;
    margin-left: 25px;

    &:first-of-type {
      margin-left: 0px;
    }
    &_imge {
         width: 212px;
    height: 290px;
      transform: scale(1);
      transition: all 1s;
      border-radius: 8px;
       background-position: center;

      &:hover {
        transform: scale(1.1);
      }
    }
    &_Textbox {
      text-align: center;
      width: 100%;
      margin-top: 15px;
      padding: 0 10px;
      box-sizing: border-box;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 18px;
      color: #333333;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
